import { getAppData, getTopPage, setGlobalData } from '@utils/tools'
import { AtTabs, AtTabsPane, AtList } from "taro-ui"
import { BasePage } from '@common/components/base-page'
import Jump from '@utils/jump'
import NavigationBar from '@components/navBar'
import AppRoute from '@utils/route/index'
import { View, Image, Text, Button, ScrollView } from '@tarojs/components'
import editA from '../../../assets/img/edit-a.png'
import add from '../../../assets/img/add.png'
import style from './index.module.scss'
import taskImg from '../../assets/img/task-info.png'
import ks from '../../assets/img/ks.png'
import dy from '../../assets/img/dy.png'
import sph from '../../assets/img/sph.png'
import xhs from '../../assets/img/xhs.png'
import wb from '../../assets/img/wb.png'
import bli from '../../assets/img/bli.png'
import share from '../../assets/img/share.png'
import people from '../../assets/img/people.png'
import bg from '../../assets/img/info-bg.png'

interface IProps {
    // origin: string
}
interface IState {
    imgList: any
}
export default class ListInfo extends BasePage<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            imgList: [ks, dy, wb, bli, xhs, sph],
        }
    }

    render() {
        const name = getTopPage().options.name
        // const { origin } = this.props
        return (
            <View>
                <NavigationBar backPageShow={true} titleColor="black" barBackgroundColor='white' title={name === 'task' ? "任务详情" : "商品详情"}></NavigationBar>
                <View className={style.taskInfo}>
                    <Image className={style.size} src={taskImg}></Image>
                    <View className={style.base}>
                        <View className={style.title}>100U新品体验官招募</View>
                        {name === 'task' ? <View>
                            <View className={style.label}>
                                <Text >新品体验</Text>
                            </View>
                            <View className={style.iconsText}>
                                <View className={style.tesks}>
                                    <View className={style.platform}>任务平台：
                                        {
                                            this.state.imgList && this.state.imgList.map((item, index) => {
                                                return (
                                                    <Image className={style.icons} src={item}></Image>
                                                )
                                            })
                                        }
                                    </View>
                                    <View className={style.person}><Image src={people}></Image>93人已报名</View>
                                </View>
                            </View>
                            <View className={style.taskTime}>
                                <Text>任务时间：</Text>
                                <Text>2023.09.30-2023.6.12</Text>
                            </View>
                        </View> :
                            <View className={style.mallText}>
                                <View className={style.numBox}>
                                    <Text className={style.num}>288888</Text>
                                    <Text className={style.mallNum}>创作值</Text>
                                </View>
                                <View className={style.taskTime}>
                                <Text style='padding-right:8rpx'>库存</Text>
                                <Text>200</Text>
                            </View>
                            </View>
                        }
                    </View>
                </View>
                {
                    name === 'task' ? <View className={style.secondTask}>
                        <View className={style.taskTitle}>
                            <View>蔡司影像，撼动人心</View>
                            <View>vivo X100 Ultra首批体验报名来啦!</View>
                        </View>
                        <View className={style.information}>
                            <View>1、试用周期 </View>
                            <View>本次机器体验期为6个月，试试用周期 本次机器体验期为6个月，试试用周期 本次机器体验期为6个月，试试用周期 本次机器体验期为6个月，试试用周期 本次机器体验期为6个月
                            </View>
                        </View>
                        <View className={style.information}>
                            <View>2、试用周期 </View>
                            <View>本次机器体验期为6个月，试试用周期 本次机器体验期为6个月，试试用周期 本次机器体验期为6个月，试试用周期 本次机器体验期为6个月，试试用周期 本次机器体验期为6个月
                            </View>
                        </View>
                    </View> :
                        <View>
                            <Image className={style.infoBg} src={bg}></Image>
                        </View>
                }

                <View>
                    {
                        name === 'task' ?
                            <View className={style.footer}>
                                {/* <View className={style.gBtn}>
                            <Button>领取任务</Button>
                        </View> */}
                                <View className={style.sBtn} onClick={() => { Jump.jump({ url: AppRoute.MODULES.SUBMITTASK }) }}>
                                    <Button>提交任务</Button>
                                </View>
                                {/* <View className={style.notStart}>
                            <Button>未开始</Button>
                        </View> */}
                                <View className={style.taskShare}>
                                    <Image className={style.share} src={share}></Image>
                                    <View className={style.text}>分享</View>
                                </View>
                            </View> :
                            <View className={`${style.footer} ${style.change}`} onClick={() => { Jump.jump({ url: AppRoute.MODULES.CONFIRMORDER }) }}>
                                <Button>兑换</Button>
                            </View>
                    }

                </View>
            </View>
        )
    }
}
